import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage, injectIntl } from 'react-intl';
import { stripesConnect } from '@folio/stripes/core';

import { MultiColumnList, Button } from '@folio/stripes/components';

import ActivityUserSearchForm from './guest-pack';

class GuestList extends Component {
  static manifest = Object.freeze({
    searchActivityUserRequired: {
      type: 'okapi',
      accumulate: true,
      path: () => 'party/users',
      params: {
        query:''
      }
    }
  });

  static propTypes = {
    stripes: PropTypes.object,
    mutator: PropTypes.shape({
      searchActivityUserRequired: PropTypes.shape({
        PUT: PropTypes.func.isRequired,
        POST: PropTypes.func.isRequired,
        GET: PropTypes.func.isRequired,
        DELETE: PropTypes.func.isRequired
      })
    }).isRequired,
    selectActivityUserTarget: PropTypes.func.isRequired,
    intl:PropTypes.object
  };

  constructor(props) {
    super(props);
    this.logger = props.stripes.logger;
    this.log = this.logger.log.bind(this.logger);
    this.state = {
      data: []
    };
    this.label = this.props.labelName;
  }

  componentDidMount() {
    // this.userList({});
  }

  search = ({ requestPreferences, creds, ...formData }) => {
    this.userList(formData.barcode);
  };

  userList = param => {
    const { GET } = this.props.mutator.searchActivityUserRequired;

    GET({ params: { query: param } })
      .then(res => {
        const data = res.users;
        this.setState({
          data
        });
      })
      .catch(e => console.log(e));
  };

  render() {
    const { intl } = this.props;
    const able = document.getElementsByClassName('mclScrollable---IM56u');

    if (able) {
      for (let l = 0; l < able.length; l++) {
        able[l].style.width = '102%';
      }
    }

    const formatter = {
      username:  <FormattedMessage id="ui-party.loans.columns.readerName" />,
      barcode:<FormattedMessage id="ui-party.loans.columns.readerAccount" />,
      edit:  <FormattedMessage id="ui-party.loans.columns.operating" />,
    };
    return (
      <div>
        <ActivityUserSearchForm
          onSubmit={this.search}
          add={this.add}
          {...this.props}
        />
        <MultiColumnList
          interactive={false}
          height={200}
          isEmptyMessage={<FormattedMessage id="ui-party.empty.list" />}
          totalCount={20}
          virtualize
          contentData={this.state.data}
          onNeedMoreData={this.moreData}
          columnMapping={formatter}
          columnWidths={{
            username: '40%',
            barcode: '40%',
            edit: '20%'
          }}
          visibleColumns={['username', 'barcode', 'edit']}
          formatter={{
            edit: item => [
              <Button
                onClick={() => {
                  this.props.selectActivityUserTarget(item);
                }}
              >
                {intl.formatMessage({ id: 'ui-party.select' })}
              </Button>
            ],
            serialNumber: item => [<span>{item.rowIndex + 1}</span>]
          }}
        />
      </div>
    );
  }
}

export default injectIntl(stripesConnect(GuestList));
